
<template>
  <div id="main">
    <div class="statistics">
      <iframe
          id="bdIframe"
          ref="myIframe"
          :src="iframeUrl"
          width='100%'
          height='auto'
          style="border: transparent solid 0;"
          allowtransparency
      ></iframe>
    </div>
  </div>
</template>
<script>

export default {
  components: {

  },
  data() {
    return {
      pageTabs: ["核心看板","敏捷看板"],
      pageTab: '敏捷看板',
      iframeUrl: ''
    }
  },
  computed: {

  },
  created() {
    this.iframeData()
  },
  mounted() {
    this.iframeStyle()
    window.addEventListener('resize', ()=>{
      console.log(1)
      this.iframeStyle()
    })
  },
  methods: {
    iframeStyle(){
      const oIframe = document.getElementById('bdIframe');
      const deviceWidth = document.documentElement.clientWidth;
      const deviceHeight = document.documentElement.clientHeight;
      oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
      oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
    },
    iframeData(){
      // you will need to install via 'npm install jsonwebtoken' or in your package.json
      let jwt = require("jsonwebtoken");
      let METABASE_SITE_URL = "http://metabase.data.kaishujia.com";
      let METABASE_SECRET_KEY = "4ecbc00c7318aa248e9dfeffeb80d4f3a6e256e8f275f3e07b8f9e99f1d14bb1";
      let payload = {
        resource: { dashboard: 46 },
        params: {},
        exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
      };
      let token = jwt.sign(payload, METABASE_SECRET_KEY);
      this.iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true";
    },
    //  点击切换tab
    handleClick(tab){
      console.log(tab.name)
      if(tab.name === '敏捷看板'){
        this.$router.push({path:'/home/agility'})
      }else if(tab.name === '核心看板'){
        this.$router.push({path:'/home'})
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.el-tabs__nav-wrap{
  margin-bottom: -10px!important;
}
.statistics {
  margin-top: 0px;
  background: transparent;
  .headerBar {
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #181818;
    border-bottom: 1px solid #eee;
    background: #fff;
    span {
      margin-left: 20px;
    }
  }
}
.tip {
  color: #666;
  font-size: 12px;
}
</style>
<style>
.el-tabs__header{
  padding: 0!important;
  position: fixed!important;
  top: 86px!important;
  width: 100%!important;
  z-index: 999!important;
}
.el-tabs__content{
  margin-top: 43px!important;
}
</style>
